<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        *{
            margin: 0;
        }
    </style>
    <script>
            function deletefunc(){
                var tr = this.parentNode.parentNode;
                var flag = confirm("是否删除" + tr.firstElementChild.innerHTML + "的信息？");
                if(flag){
                    tr.parentNode.removeChild(tr);
                }
                return false;
            }
        window.onload = function(){
            var allA = document.getElementsByTagName("a");
            for(var i = 0; i < allA.length; i++){
                allA[i].onclick = deletefunc;
            }
            var inputs = document.getElementsByTagName("input");
            var submit = document.getElementById("submit");
            submit.onclick = function(){
                var name = inputs[0].value;
                var age = inputs[1].value;
                var salary = inputs[2].value;
                var list = document.getElementById("list");
                var tr = document.createElement("tr");
                var td1 = document.createElement("td");
                var td2 = document.createElement("td");
                var td3 = document.createElement("td");
                var td4 = document.createElement("td");
                var a = document.createElement("a");
                a.innerHTML = "delete";
                a.href = "javascript:;";
                a.onclick = deletefunc;
                td1.innerHTML = name;
                tr.appendChild(td1);
                td2.innerHTML = age;
                tr.appendChild(td2);
                td3.innerHTML = salary;
                tr.appendChild(td3);
                td4.appendChild(a);
                tr.appendChild(td4);
                tr.innerHTML = "<td>"+name+"</td>"+
                               "<td>"+age+"</td>"+
                               "<td>"+salary+"</td>"+
                               "<td><a href='javascript:;'>delete</a></td>"
                var a = tr.getElementsByTagName("a")[0];
                a.onclick = deletefunc;
                list.appendChild(tr);
            }
        }
    </script>
</head>
<body>
    <table id="list">
        <tr class="test">
            <th>姓名</th>
            <th>年龄</th>
            <th>薪水</th>
            <th></th>
        </tr>
        <tr class="test">
            <td>tom</td>
            <td>18</td>
            <td>1000</td>
            <td><a href="javascript:;">delete</a></td>
        </tr>
        <tr class="test">
            <td>jerry</td>
            <td>20</td>
            <td>8000</td>
            <td><a href="javascript:;">delete</a></td>
        </tr>
        <tr>
            <td>mack</td>
            <td>25</td>
            <td>10000</td>
            <td><a href="javascript:;">delete</a></td>
        </tr>
    </table>
    <br>
    <br>
    <br>
    <table id="operator">
        <tr>
            <th>添加新员工</th>
        </tr>
        <tr>
            <td>
                name: <input type="text" name="name" id="name" />
            </td>
        </tr>
        <tr>
            <td>
            age: <input type="text" name="age" id="age" />
            </td>
        </tr>
        <tr>
            <td>
            salary: <input type="text" name="salary" id="salary" />
            </td>
        </tr>
        <tr>
            <td>
            <button id="submit">提交</button>
            </td>
        </tr>
    </table>
</body>
</html>